<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
    li {
        list-style: none;
        display: block;
        padding: 20px;
        font-size: 20px;
        width: 150px;
        cursor: pointer;
    }

    li:hover {
        background-color: #f4f4f4;
    }

    input {
        margin: 20px;
        padding: 5px;
    }

    button {
        padding: 5px;
        margin: 10px;
    }

    .updata,
    .deldata,
    .adddata {
        position: absolute;
        width: 200px;
        background-color: #fff;
        padding: 10px;
        top: 300px;
        left: 500px;
        text-align: center;
        transition: all .3s;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }

</style>

<body>
<div id="root">
    <input type="text" v-model="keyword" placeholder="请输入名字">
    <button @click="openadd">添加信息</button><button @click="opendel">删除信息</button>
    <div class="adddata" v-show="addsee == 1">
        添加信息
        <input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
        <input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
        <input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
        <button @click="add" id="addbtn">确 认</button>
        <button @click="closeadd">关 闭</button>
    </div>
    <div class="deldata" v-show="delsee == 1">
        删除信息
        <input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
        <input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
        <input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
        <button @click="del">确 认</button>
        <button @click="closedel">关 闭</button>
    </div>
    <div class="updata" v-show="upsee == 1">
        修改信息
        <input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID" disabled>
        <input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
        <input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
        <button @click="up">确 认</button>
        <button @click="closeup">关 闭</button>
    </div>
    <ul>
        <li v-for="(i,index) in filterdata" :key="i.id" @click="openup(i)">
            {{i.id}}-{{i.name}}-{{i.age}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#root",
        data() {
            return {
                //原始表单数据
                listdata: [
                    { id: "0", name: "小明", age: "18" },
                    { id: "1", name: "小王", age: "19" },
                    { id: "2", name: "王明", age: "20" },
                    { id: "3", name: "王红", age: "18" },
                    { id: "4", name: "小红", age: "19" },
                    { id: "5", name: "红明", age: "21" },
                ],
                //搜索关键字
                keyword: "",
                //输入的数据
                addlistdata: { id: "", name: "", age: "" },
                addsee: "",
                delsee: "",
                upsee:""
            }
        },
        computed: {
            filterdata() {
                return this.listdata.filter((i) => {
                    return i.name.indexOf(this.keyword) !== -1
                })
            },
        },
        methods: {
            openadd() {
                this.addsee="1"
                this.closedel()
                this.closeup()
            },
            closeadd(){
                this.addsee=""
            },
            opendel(){
                this.delsee="1"
                this.closeadd()
                this.closeup()
            },
            closedel(){
                this.delsee=""
            },
            openup(i){
                this.closeadd()
                this.closedel()
                this.upsee = "1"
                this.addlistdata = { id: i.id, name: i.name, age: i.age }
            },
            closeup(){
                this.upsee = ""
                this.addlistdata = { id: "", name: "", age: "" }
            },
            add() {
                var arr = []
                //获取所有id
                for (let i = 0; i < this.listdata.length; i++) {
                    arr.push(this.listdata[i].id)
                }
                //获取最大ID值
                var max = Math.max.apply(null, arr);
                //判断输入id小于最大id
                if (this.addlistdata.id <= max) {
                    alert("请输入合法的id,必须大于" + max)
                    //判断name为空
                } else if (this.addlistdata.name == "") {
                    alert("请输入名字")
                    //判断年龄范围
                } else if (this.addlistdata.age < 15 || this.addlistdata.age > 25) {
                    alert("请输入合适的年龄（15~25）")
                } else {
                    //添加addlistdata到listdata
                    this.listdata.push(this.addlistdata)
                    //初始化addlistdata对象 使其为空
                    this.addlistdata = { id: "", name: "", age: "" }
                    //调用closeadd方法关闭页面
                    this.closeadd()
                    alert("添加成功")
                }
            },
            del() {
                //定义需要删除的id对象 初始为空
                let arr = { id: "", index: "" }
                this.listdata.forEach((item, index) => {
                    if (this.addlistdata.id == item.id) {
                        //给id对象赋值
                        arr = { id: item.id, index: index }
                    }
                })
                //判断id为空
                if (this.addlistdata.id == "") {
                    alert("请输入将要删除的ID")
                    //判断id存在即删除
                } else if (this.addlistdata.id == arr.id) {
                    //删除此ID对应的索引的信息
                    this.listdata.splice(arr.index, 1)
                    //初始化addlistdata对象 使其为空
                    this.addlistdata = { id: "", name: "", age: "" }
                    this.closedel()
                    alert("删除成功")
                    //判断id不存在
                } else {
                    alert("此ID不存在")
                }
            },
            up() {
                //获取要修改的信息索引
                this.listdata.forEach((item, index) => {
                    if (this.addlistdata.id == item.id) {
                        //判断名字合法
                        if (this.addlistdata.name == "") {
                            alert("请输入名字")
                            //判断年龄
                        } else if (this.addlistdata.age < 15 || this.addlistdata.age > 25) {
                            alert("请输入合适的年龄（15~25）")
                        } else {
                            //修改信息
                            this.listdata[index].name = this.addlistdata.name
                            this.listdata[index].age = this.addlistdata.age
                            this.closeup()
                            alert("修改成功")
                        }
                    }
                })
            }
        }
    })
</script>

</body>
</html>